<template>
    <div class="purchaseTags">
        <div class="purchaseTop">
            <div class="tags">
                <div class="tags_liet">
                    <div v-for="item in orderName" :key="item.id" @click="tagsLietc(item.id)">
                        <span :class="{ active: order == item.id }" class="tags_liet_c">{{
                            item.name }}</span>
                    </div>
                </div>
                <div class="caption"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useCounterStore } from '@/pinia/index'
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref } from 'vue'
const store = useCounterStore()
store.count = purchaseIndex
const purchaseIndex = ''
let order = ref(purchaseIndex)
let orderIndex = ref(null)
const tags = [
    {
        id: '1',
        name: '首页'
    },
    {
        id: '2',
        name: '采购信息'
    },
    {
        id: '3',
        name: '商品信息'
    },
    {
        id: '4',
        name: '品牌专区'
    },
    {
        id: '5',
        name: '会员权益'
    },
    {
        id: '6',
        name: '关于我们'
    },
]
const orderName = ref(tags)

//高亮
const tagsLietc = (id) => {
    console.log(id) 
    order.value = id 
    orderIndex.value = id 
    // localStorage.setItem('key',id)
    store.count = id 
    console.log('pinia', store.count) 
    router.push({ path:'/purchase'}) 
}
</script>
<style lang="scss" scoped>
.active {
    background-color: #0049A8;
}

.purchaseTags {
    background-color: #2270D7;
    height: 50px;

    .purchaseTop {
        width: 75vw;
        margin: 0 auto;

        .tags {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 75vw;
            height: 50px;

            .caption {
                width: 184px;
                height: 40px;
                border-radius: 5px;
                background: url('@/assets/img/header/zhaobaio.png') no-repeat center;
                background-color: #FE8D03;
            }

            .tags_liet {
                display: flex;
                align-items: center;

                .tags_liet_c {
                    display: inline-block;
                    width: 120px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    color: #fff;
                }
            }
        }
    }


}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
